<script setup>
import axios from "axios";
import * as echarts from "echarts";
import {markRaw, onMounted, ref} from "vue";

const radar = ref()
const myChart = ref()
const option = ref({})
const data = ref()
const init = async () => {
  await axios.get('http://127.0.0.1:5000/radar').then(res => {
    data.value = res.data
  })
  myChart.value = markRaw(echarts.init(radar.value));
  draw();
}
const draw = () => {
  option.value = {
    baseOption: {
      timeline: {
        //loop: false,
        axisType: 'category',
        show: true,
        autoPlay: true,
        playInterval: 3000,
        data: data.value.year
      },
      title: {
        text: '各年农林牧渔总产值雷达图',
        left: 'center',
        textStyle: {
          color: '#eee'
        }
      },
      tooltip: {},
      // legend:{
      //   data:data.value.year,
      //   bottom: 5,
      //   left:'15%',
      //   width:'70%',
      //   itemGap: 20,
      //   textStyle: {
      //     color: '#fff',
      //     fontSize: 14
      //   },
      //   selectedMode: 'single',
      //   type:'scroll',
      //   pageTextStyle:{
      //     color:'#fff'
      //   }
      // },
      radar: {
        indicator: data.value.data_max,
        shape: 'circle',
        splitNumber: 5,
        radius: '60%',
        axisName: {
          color: 'rgb(238, 197, 102)'
        },
        splitLine: {
          lineStyle: {
            color: [
              'rgba(238, 197, 102, 0.1)',
              'rgba(238, 197, 102, 0.2)',
              'rgba(238, 197, 102, 0.4)',
              'rgba(238, 197, 102, 0.6)',
              'rgba(238, 197, 102, 0.8)',
              'rgba(238, 197, 102, 1)'
            ].reverse()
          }
        },
        splitArea: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(238, 197, 102, 0.5)'
          }
        }
      },
      series: {
        type: 'radar',
        lineStyle: {
          width: 1,
          opacity: 0.5
        },
        symbol: 'none',
        itemStyle: {
          color: '#B3E4A1'
        },
        areaStyle: {
          opacity: 0.05
        }
      }
    },
    options: data.value.data.map((value, index) => {
      return {
        series: {
          name: data.value.year[index],
          data: [value],
        }
      }
    })
  };
  myChart.value.setOption(option.value, {notMerge: true});
}
onMounted(() => {
  init()
})

</script>

<template>
  <div class="radar" ref="radar"></div>
</template>

<style scoped>
.radar {
  width: 100%;
  height: 100%;
}
</style>